<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
// 完成加载过程
// var echarts = require('echarts')
var echarts = require('echarts/lib/echarts') // 引入echarts主模块
require('echarts/lib/chart/pie') // 引入雷达图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

require('echarts/lib/component/legend')
require('echarts/lib/component/toolbox')

export default {
  props: {
    item: {
      type: Array,
      required: true
    }
  },
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
    myChart.setOption({
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      tooltip: {
        trigger: 'item',
        // 提示框的数据样式显示
        formatter: '{a}<br/>占比名是{b}：{c} ({d}%) '
      },
      series: [
        {
          // name: 'Nightingale Chart',
          type: 'pie',
          radius: [15, 50],
          // sort: 'ascending',
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 0
          },
          data: this.item
        }
      ]
    })
  }
}
</script>

<style>
.radar-echart {
    width: 300px;
    height: 200px;
    padding: 10px;
}
</style>
